<template>
    <BasicDrawer v-bind="$attrs" @register="register" :title="displayModuleTitle" width="50%">
        <BasicTable @register="registerTable" :loading="false" :ellipsis="true" :data-source="tableData.station">
            <template #toolbar>
                <a-button type="primary" @click="onSetStationsButtonClick">设置站点关联</a-button>
            </template>
            <!-- <template #checked="{ record }">
                {{ record.checked ? '是' : '否' }}
            </template> -->
            <template #direction="{ record }">
                {{ record.direction == 0 ? '未定义' : record.direction == 1 ? '数据入' : record.direction == 2 ?
                    '数据出' :
                    '数据出、数据入' }}
            </template>
            <template #action="{ column, record }">
                <TableAction :actions="[
                    {
                        label: '修改方向',
                        onClick: onEditDirectionButtonClick.bind(null, record),
                    },
                ]
                    " />
            </template>
        </BasicTable>
    </BasicDrawer>
    <setStationsModal @register="registerSetStationModal" @success="opSuccess" />
    <UpdateDiretionModal @register="registerUpdateDirectionModal" @success="opSuccess" />
</template>
<script lang="ts">
import { computed, defineComponent, ref, unref } from 'vue';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { BasicTable, TableAction, useTable } from '/@/components/Table/index';
import { QcUnifyTransToChildProps } from '/#/QcUnify';
import { displayTitle } from '/@/utils/QcUnifyUtil';
import { stationTableColumns } from './exchangeStation.data'
import { getCategoryStations } from '/@/api/qms/exchangeChannel'
import { ExchangeCategoryStationDto, ExchangeCategoryStationResult } from '/@/api/qms/model/exchangeChannelModel';
import { useMessage } from '/@/hooks/web/useMessage';
import { useModal } from '/@/components/Modal';
import setStationsModal from './setStationsModal.vue'
import UpdateDiretionModal from './UpdateDiretionModal.vue';
import { OperationTypeEnum } from '/@/enums/appEnum';

export default defineComponent({
    name: 'CategoryStationDrawer',
    components: { BasicDrawer, BasicTable, TableAction, setStationsModal, UpdateDiretionModal },
    setup(_, { emit }) {
        const qcUnifyProps = ref<QcUnifyTransToChildProps>();
        const tableData = ref({
            station: []
        });
        const { createMessage } = useMessage();
        // 保存关联分类的id
        const categoryId = ref();
        const [registerSetStationModal, { openModal: openSetStationsModal }] = useModal();
        const [registerUpdateDirectionModal, { openModal: openUpdateDirectionModal }] = useModal();
        const [registerTable, { setTableData }] = useTable({
            columns: stationTableColumns,
            canResize: true,
            immediate: true,
            bordered: true,
            ellipsis: true,
            striped: false,
            showTableSetting: true,
            indexColumnProps: {
                width: 50
            },
            tableSetting: {
                redo: false,
            },
            actionColumn: {
                width: 180,
                title: '操作',
                dataIndex: 'action',
                slots: { customRender: 'action' },
                fixed: 'right', //表格操作列是否固定，不设置时默认固定在右侧
            },
        });
        const [register, { closeDrawer }] = useDrawerInner((data) => {
            if (data != undefined && data != null) {
                let unrefData = unref(data);
                qcUnifyProps.value = unrefData;
                //接收父组件传递的数据
                if (unrefData?.dataId) {
                    categoryId.value = unrefData.dataId;
                }
                getStationData();
            }
        });
        let displayModuleTitle = computed(() => {
            return displayTitle(qcUnifyProps.value);
        });
        /**
         * 获取所有的站点关联信息
         */
        function getStationData() {
            tableData.value.station = [];

            if (!categoryId.value) {
                // 如果分类无效，不做处理
            } else {
                getCategoryStations(categoryId.value)
                    .then((res: ExchangeCategoryStationResult) => {
                        console.log('res', res);
                        if (res != undefined && res != null && res.length > 0x0) {
                            tableData.value.station = res.filter(item => item.checked).map(item => {
                                return {
                                    ...item.station,
                                    direction: item.direction,
                                }
                            });
                        }
                    })
                    .catch((ex) => {
                        console.log('catch ', ex);
                        createMessage.error(ex.msg);
                    });
            }
        }
        //设置指定分类与站点关联
        function onSetStationsButtonClick(record: ExchangeCategoryStationDto) {
           let propsData: QcUnifyTransToChildProps = {
                moduleName: '数据分类',
                operateType: OperationTypeEnum.SET_RELATION,
                dataId: categoryId.value, // 分类ID,要设定指定分类下的关联站点
                data: record,
                dataTitle: qcUnifyProps.value.dataTitle
            };

            openSetStationsModal(true, propsData);
        }
        //设置交换方向
        function onEditDirectionButtonClick(record: ExchangeCategoryStationDto) {
            let propsData: QcUnifyTransToChildProps = {
                moduleName: '数据分类',
                operateType: OperationTypeEnum.SET_RELATION,
                dataId: categoryId.value, // 分类ID,要设定指定分类下的关联站点
                data: record,
                dataTitle: qcUnifyProps.value.dataTitle
            };
            openUpdateDirectionModal(true, propsData);
        }
        // 任何操作后的成功回调(修改方向,设置关联站点),用户获取所有站点数据
        function opSuccess() {
            getStationData();
        }
        return {
            register,
            closeDrawer,
            tableData,
            categoryId,
            displayModuleTitle,
            registerUpdateDirectionModal,
            registerSetStationModal,
            onSetStationsButtonClick,
            opSuccess,
            onEditDirectionButtonClick,
            getStationData,
            registerTable,
            setTableData
        };
    }
});
</script>